<script lang="ts">
  import { DictionaryStudyRecord, getMyStudyWordsHistory } from '@/api/dictionary';
  import { ROUTER_PATHS, useRouter } from '@/constants/router';
  import { defineComponent, ref } from '@vue/composition-api';

  export default defineComponent({
    filters: {
      getPronunciate(text: string) {
        return text.replace(/英(.+?)(?=\s)/, '');
      }
    },
    setup() {
      const router = useRouter();

      const list = ref<DictionaryStudyRecord[]>([]);

      getMyStudyWordsHistory().then((res) => {
        list.value = res.data;
      });

      function toPage(item: DictionaryStudyRecord) {
        router.navigateTo({
          url: ROUTER_PATHS.WORD_DETAIL,
          params: {
            id: item.wordId
          }
        });
      }

      return {
        list,
        toPage
      };
    }
  });
</script>

<template>
  <view class="word">
    <view class="word-list">
      <template v-for="(item, index) in list">
        <view class="word-list-item" :key="index" @click.stop="toPage(item)">
          <view class="content">
            <view class="left">
              <view class="word-content">{{ item.wordInfo.wordContent }}</view>
              <view class="word-pronunciation">{{ item.wordInfo.wordPronunciation | getPronunciate }}</view>
            </view>
            <view class="translate">
              <text>
                {{ item.wordInfo.wordTranslate }}
              </text>
            </view>
          </view>
          <view class="line"></view>
        </view>
      </template>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  .word {
    padding-bottom: 80rpx;
    .word-list-item {
      &:active {
        background-color: silver;
      }

      .content {
        padding: 30rpx 30rpx 30rpx 40rpx;
        display: flex;
        align-items: center;
        .left {
          width: 290rpx;
          display: flex;
          flex-direction: column;

          .word-content {
            font-size: 30rpx;
            font-weight: 600;
          }

          .word-pronunciation {
            margin-top: 10rpx;
          }
        }

        .translate {
          flex: 1;

          height: 75rpx;
          overflow: hidden;
        }
      }
    }

    .line {
      width: 100%;
      height: 2rpx;
      background-color: palegreen;
    }
  }
</style>
